{% extends "layout.html" %}
{% block title %}个人订阅设置{% endblock %} 
{% block script %}
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" media="all" />
{% endblock %}
{% block body %}
	  <header id="branding"><!-- banner -->
	  	<nav id="access" class="clearfix"><!-- navigation --><a id="logout" href="{{ logout }}" class="button negative bigbtn">
	  		  <img src="/images/icons/key.png" alt="登录Google account">登出
	  		</a>
	  		<a id="subscribe" href="#" class="button positive bigbtn">
	  		  <img src="/images/icons/tick.png" alt="" />添加订阅
	  		</a>
	  		
	  	</nav>
	  	<div id="sched-edit" style="display: none">
	  	<hr />
	  		<form id="sched-form" action="/schedule/add" method="post">
	  			<p id="validateTips" class="error" style="display:none"></p>
	  			<p class="clearfix">
	  			<button id="select-city" type="button">选择城市</button>
	  			<input type="hidden" name="area" id="area" />
	  			<input type="hidden" name="code" id="code" />
	  			</p>
	  			<p><label for="email">邮件</label><br /><input class="text" type="text" name="email" id="email" /></p>
	  			<p><label for="timing">时间</label><br />
	  				<select name="timing" id="timing"><option value="">接收时间</option>
	  					<option value="17:00">17:00</option>
	  					<option value="17:30">17:30</option>
	  					<option value="18:00">18:00</option>
	  					<option value="18:30">18:30</option>
	  					<option value="19:00">19:00</option>
	  				</select>
	  			</p>
	  			<p class="clearfix"><button type="reset">重置</button><button type="submit"><img src="/images/icons/tick.png" alt="" />提交 </button></p>
	  		</form>
	  	</div>
	  </header>
	<div id="main">
	{% if scheds|length %}
	<form action="/schedule/delete" method="post" id="db-table-form">
		<table id="data-tb">
		<caption>订阅列表</caption>
			<thead>
				<tr>
					<th class="span-1 last"><input type="checkbox" id="select-all" /></th>
					<th>城市</th>
					<th>定时</th>
					<th>邮箱</th>
					<th>创建日期</th>
				</tr>
			</thead>
			<tbody>
			{% for sched in scheds %}
				<tr{{ loop.cycle('', ' class="even"') }}>
					<td><input type="checkbox" name="key" value="{{ sched.key|e }}" /></td>
					<td>{{ sched.city }}</td>
					<td>{{ sched.timing }}</td>
					<td>{{ sched.email }}</td>
					<td>{{ sched.created }}</td>
				</tr>
			{% endfor %}
			</tbody>
		</table>
		<div class="db-table-caption clearfix">
		<button id="db-delete" class="button" name="delete" type="submit">删除</button>
		</div>
	</form>	  
	{% else %}
		<p class="notice">你还没有任何订阅信息。</p>
	{% endif %}

	</div>
{% endblock %}
{% block footerscript %}
<div id="dialog-city-form" title="搜索城市" style="display:none">
	<p class="notice">输入城市名、全拼、简拼、电话区号、邮编查询</p>

	<label for="city">输入关键词</label>
	<input type="text" name="city" id="city" 
		class="text ui-corner-all" placeholder="输入关键词搜索并选择对应的城市" />
	<input type="hidden" name="cid" id="cid" />
</div>
<script type="text/javascript">
	(function($){
		//邮箱后缀
		var mailSuffix = [{ label: "139.com", value: "139.com" },
		                  { label: "wo.com.cn", value: "wo.com.cn" },
		                  { label: "gmail.com", value: "gmail.com" },
		                  { label: "qq.com", value: "qq.com" },
		                  { label: "163.com", value: "163.com" },
		                  { label: "yahoo.com.cn", value: "yahoo.com.cn" },
		                  { label: "hotmail.com", value: "hotmail.com" },
		                  { label: "live.com", value: "live.com" }];
		//提示信息jQuery对象
		var tips =  $( "#validateTips" );
		//添加订阅表单域(jQuery)集合
		var allFields = $( [] ).add( $('#code') ).
								add( $('#area') ).
								add( $('#email') ).
								add( $('#timing') );
		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "notice" ).show();
			setTimeout(function() {
				tips.removeClass( "notice");
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "长度为 " + n + " 其必须为 " +
					min + " 到 " + max + "。" );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				if(o.is(':text')) o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
		
		$('#sched-form').submit(function() {
			var bValid = true;
			allFields.removeClass( "ui-state-error" );
			
			//bValid = bValid && checkLength( area, "area", 3, 16 );
			bValid = bValid && checkLength( $('#email'), "Email", 6, 80 );

			bValid = bValid && checkRegexp( $('#area'), /^[\u4e00-\u9fa5]+$/, "需要选择相应城市。 " );			
			bValid = bValid && checkRegexp( $('#email'), /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "邮箱格式错误，eg. ui@jquery.com" );
			bValid = bValid && checkRegexp( $('#timing'), /^\d{2}:\d{2}$/, "需选择发送信息时间" );

			if (! bValid ) {
				return false;
			}
			
		});
		
		$( "#dialog-city-form" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				'取消': function() {
					$( this ).dialog( "close" );
				},
				'确定': function(){
					var code = $("#cid").val();
					var area = $("#city").val();
					if (code != ''){
						$('#area').val(area);
						$('#select-city span').text(area);
						$('#code').val(code);						
					}

					$( this ).dialog( "close" );
				}
			},
		    close: function(event, ui) { 
                $("#cid").val('');
                $("#city").val('');		    	
		    }
		});
		$( "#city" ).autocomplete({
			source: function( request, response ) {
				$.ajax({
					url: "http://toy.weather.com.cn/SearchBox/searchBox",
					dataType: "jsonp",
					data: {
						language: "zh",
						keyword: request.term
					},
					success: function( data ) {
						response( $.map( data.i, function( item ) {
							return {
								label: item.n + (item.m?'('+item.m+')':'') + ", " + item.d,
								value: item.n,
								code: item.i
							}
						}));
					}
				});
			},
			select: function( event, ui ) {
				if(ui.item)  
					$('#cid').val(ui.item.code);
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
				$('#cid').val();
				
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			},
			minLength: 2
		});
		$( "#select-city" ).button().click(function() {
			$( "#dialog-city-form" ).dialog( "open" );
		});
		$('#email').autocomplete({
			source: function( request, response ) {
			    response( $.map( mailSuffix, function( item ) {
			    	var k = request.term.split('@');
			    	if (k.length === 1){
			    		return {label: k[0] + '@' + item.label,
			    			     value: k[0] + '@' + item.value};
			    	}
                    
			    	if (0 === item.value.indexOf(k[1].toLowerCase())){
                        return {label: k[0] + '@' + item.label,
                                 value: k[0] + '@' + item.value};			    		
			    	}
                }));
            },
            minLength: 2
		});
		$("#subscribe").click(function(){
			$('#sched-edit').slideToggle("normal");
			return false;
		});
		$('#select-all').click(function(e){
			var checked = this.checked;
			$(this.form.key).attr('checked', checked);
		});
	})(jQuery);
</script>
{% endblock %}